<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="./vue/vue.js"></script>
	
	<body>
		<h3>姓名(单值): 年龄(单值): 爱好(数组): 女朋友(对象): 豪车(对象数组): </h3>
		<div id="app">
			{{name}} \ {{age}}
			<hr />
			{{hobby[hobby.length-1]}} \ {{girl.name}} \ {{girl.age}} \ {{girl.hobby[0]}}
			<hr />
			{{cars[0].name}} \ {{cars[0].color}} <br />
			{{cars[1].name}} \ {{cars[1].color}} <br />
			{{cars[cars.length-1].name}} \ {{cars[cars.length-1].color}}
		</div>
	</body>
</html>

<script>
	
	new Vue({
		el : "#app",
		data : {
			msg : "Hello Vue Js",
			name : "张强",
			age : 18,
			hobby : ["游戏","跑步","爬山"], //字符串数组
			girl : {
				name : "小五",
				age : 16,
				hobby : ["游泳"]
			},
			cars : [{name : "红旗H9",
					 color : "red"
					},
					{name : "玛莎拉蒂",
					 color : "blue"
					},
					{
					 name : "保时捷911",
					 color : "yellow"
					}]
		}
	});
</script>
